<template>
  <div class="service">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 我要投诉 </span>
    </div>
    <div class="type-box">
    <i class="el-icon-s-comment"></i>
    <div class="type-text">请选择投诉类型</div>
    <div class="type">
      <el-select v-model="value" placeholder="物业的服务">
    <el-option 
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
    </div>
    </div>
    <div class="type-info">
       <div class="type-info-address">
         <div class="type-info-text">联系人</div>
          <div class="input"> <el-input placeholder="请输入联系人" v-model="inputpeople" clearable></el-input></div>
      </div>
      <div class="type-info-address">
         <div class="type-info-text">联系电话</div>
          <div class="input"> <el-input placeholder="请输入联系电话" v-model="inputnumber" clearable></el-input></div>
      </div>
      
    </div>
  
    <div class="typetextarea">
       <div class="type-info-address">
        <i class="el-icon-s-comment"></i>
        <div class="type-text">请描述详细内容</div>
      </div>
      <div class="textarea">
        <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      </div>
    </div>
    <div class="commit" @click=commit() >提 交</div>
  </div>

</template>

<script>
export default {
  name: 'Comolain',
  data() {
      return {
        inputaddress: '',
        inputpeople:'',
        inputnumber:'',
        selectproject:'',
        textarea: '',
         options: [{
          value: '选项1',
          label: '房屋质量'
        }, {
          value: '选项2',
          label: '公共设施'
        },
        {
          value: '选项3',
          label: '噪音污染'
        },
        {
          value: '选项4',
          label: '物业服务'
        },
         {
          value: '选项5',
          label: '其他'
        },
         ],
        value: '',
      }
    },
  methods: {
      

     toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
    commit(){
        this.$confirm('投诉信息'+'<br>'
        +'投诉类型：'+this.label+'<br>'
        +'联系电话：'+this.inputnumber+'<br>', '是否确定提交订单？', {
          customClass: 'message-logout',
           dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            showClose: true,
            type: 'success',
            message: '创建订单成功!'
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '已取消'
          });          
        });
    }
},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.message-logout {
    width: 300px;
    margin-top:100px;
    background-color:#faf2da;
  }
</style>
<style scoped>


.i{
  font-size:30px;
  margin-top:25px;
  margin-bottom: 10px;
}
 .type-box{
   display: flex;
   height:50px;
   width:345px;
   margin-top:30px;
   margin-left:20px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
  justify-content: space-between;
  border-radius: 10px;
   

}
.el-icon-s-comment{
  color:#49A765;
  font-size:24px;
  margin-top:13px;
  margin-left:7px;
}

.type-text{
   height:20px;
   width:120px;
   font-size:15px;
   margin-top:14px;
   margin-left:7px;

 }
 .type{
  margin-top: 5px;
  margin-right: 20px;
}
.type-info{
  height:135px;
  width:345px;
  margin-top:10px;
  margin-left:20px;
  border-radius: 10px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
   
}
.type-info-address{
  display: flex;
  height:60px;
 
}
.type-info-text{
  height:20px;
  width:80px;
  margin-top:20px;
  margin-left:10px;
  font-size: 15px;
}
.input{
  width:230px;
  height:40px;
  margin-top:10px;
}
el-input >>> .el-input{
  border-radius: 10px;
}
.el-divider{
  margin-top:1px;
}

.typetextarea{
  height:265px;
  width:345px;
  margin-top:10px;
  margin-left:20px;
  border-radius: 10px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
}
 .textarea{
  width:305px;
  margin-left:20px;
  border-radius: 10px;
 }
 .jiaofei-text{
   width:100px;
   margin-left:123px;
 }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
    margin-left:20px;
  }
  .commit{
  text-align: center;
  height:45px;
  width:345px;
  margin-top:10px;
  margin-left:20px;
  border-radius: 10px;
   background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
  line-height: 45px;
  font-weight: bold;
  }
 
</style>
